<template>
  <div
    class="editable-progress"
    @mouseover="onMouseOver"
    @mousedown="onMouseDown"
    @mouseleave="onMouseLeave"
    @click="wrapperClick">
    <ElProgress
      v-show="!slider"
      :class="percent === 100 ? 'progress__success' : ''"
      :stroke-width="strokeWidth"
      text-inside
      :percentage="percent" />
    <ElSlider
      v-if="!disabled"
      v-show="slider"
      ref="slider"
      v-model="percent"
      :tooltip-class="tooltipClass"
      :max="max"
      :format-tooltip="formatTooltip"
      :style="{ width: `${max === 100 ? 100 : max - 1}%` }"
      :disabled="disabled"
      :step="step"
      @input="onInput"
      @change="onChange" />
  </div>
</template>

<script>
  export default {
    name: 'EditableProgress',
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      strokeWidth: {
        type: Number,
        default: 22
      },
      step: {
        type: Number,
        default: 10
      },
      max: {
        type: Number,
        default: 100
      },
      value: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        slider: false,
        mouseDown: false,
        tooltipClass: 'hide-tooltip',
        percent: this.value
      }
    },
    watch: {
      value(val) {
        if (this.percent !== val) {
          this.percent = val
        }
      }
    },
    methods: {
      formatTooltip(val) {
        return `${val}%`
      },
      onInput(percent) {
        if (this.value !== percent) {
          this.$emit('input', percent)
        }
      },
      onChange(percent) {
        this.slider = false
        this.tooltipClass = 'hide-tooltip'
        this.$emit('change', percent)
      },
      onMouseOver() {
        if (this.disabled || this.slider) {
          return
        }
        this.slider = true
        this.$nextTick(() => {
          this.$refs.slider.$refs.button1.$refs.tooltip.updatePopper()
          this.tooltipClass = ''
        })
      },
      onMouseDown() {
        if (this.disabled) {
          return
        }
        this.mouseDown = true
        window.addEventListener('mouseup', this.onMouseUp)
      },
      onMouseUp() {
        if (this.disabled) {
          return
        }
        this.mouseDown = false
        this.tooltipClass = 'hide-tooltip'
        window.removeEventListener('mouseup', this.onMouseUp)
      },
      onMouseLeave() {
        if (this.disabled || this.mouseDown) {
          return
        }
        this.tooltipClass = 'hide-tooltip'
        this.slider = false
      },
      wrapperClick() {
        if (this.disabled) {
          return
        }
        this.slider = true
      }
    }
  }
</script>

<style lang="scss">
  $stroke-width: 22px;

  .editable-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    background-color: #e4e7ed;
    border-radius: 100px;

    .el-progress,
    .el-slider {
      width: 100%;
      font-weight: 700;
    }

    .el-slider__runway {
      margin: 0;
    }

    .el-progress-bar__outer {
      background-color: #e4e7ed;
    }

    .el-slider__bar,
    .el-slider__runway {
      height: $stroke-width;
      border-radius: 100px;
    }

    .el-slider__button-wrapper {
      width: $stroke-width + 10px + 20px;
      height: $stroke-width + 10px + 20px;

      .el-slider__button {
        width: $stroke-width + 2px;
        height: $stroke-width + 2px;
      }
    }
  }
</style>
